<template>
  <div class="layout">
    <div class="jm-rp-left-container">
      <div id="treeDiv">
        <span slot="title" @click="toggleLeft" style="float: top;display: flex" class="icnoAlignment">
          <span style="color: #000000;font-size: 12px;position: relative;top: 4px;" v-if="dataShow">收起</span>
          <Icon type="md-arrow-dropleft" size="24" />
        </span>
        <dataSourceSetting ref="dataSource" @saveback="saveDbBack" @cancelback="cancelback"></dataSourceSetting>

        <card style="width: 221px;" v-if="dataShow" :style="{'overflowY':'auto',overflowX:'hidden', 'height':windowHeight+'px'}">
          <template>
            <div id="dataDiv">
              <template>
                <i-menu theme="light" style="margin-left: -25px;z-index: auto;width: auto !important;" :class="menuitemClasses">
                  <div style="width:95%;height: 30px;border: none;margin-left: 10px; z-index:999;cursor: pointer;margin-left:27px">
                    <span class="rightFontSize">数据集管理
                    </span>
                    <Dropdown @on-click="onMenuSelect" placement="bottom-start" :transfer="true">
                      <a href="javascript:void(0)">
                        <Icon type="md-add" style="position:relative;left:89px" />
                      </a>
                      <Dropdown-menu slot="list">
                        <Dropdown-item name="sqlInfo" class="rightFontSize">SQL数据集</Dropdown-item>
                        <Dropdown-item name="apiInfo" class="rightFontSize">API数据集</Dropdown-item>
                        <Dropdown-item name="javabean" class="rightFontSize">JavaBean数据集</Dropdown-item>
                        <Dropdown-item name="jsonInfo" class="rightFontSize">JSON数据集</Dropdown-item>
                      </Dropdown-menu>
                    </Dropdown>
                  </div>
                  <div id="dataTree">
                    <template v-for="(item,index) in treeData">
                      <Tree :data="item" @on-toggle-expand="onTreeToggleExpand" @on-select-change="changeTree"></Tree>
                    </template>
                  </div>

                  <Submenu name="reportIfo" class="reportIfo">
                    <template slot="title">
                      <span class="rightFontSize">报表信息</span>
                    </template>
                    <div style="height: 86px;line-height: 8px;margin-left: 25px;">
                      <div>
                        <i-form :model="designerObj" label-colon :label-width="90" class="dataSourceForm">
                          <div label="" class="rightFontSize">
                            <span>名称</span>
                            <i-input v-model="designerObj.name" placeholder="请输入名称" @on-blur="excelQueryName" @on-change="changeName" class="rightFontSize" style="margin-left: 4px; width: 132px;"></i-input>
                          </div>

                          <div class="dataSourceForm rightFontSize" style="margin-top: 10px">
                            <span>类型</span>
                            <i-select :model.sync="designerObj.type" v-model="designerObj.type" style="margin-left: 4px;  width: 132px;" @on-change="selectmenuList">
                              <i-option style="z-index: 9999" class="rightFontSize" v-for="item in menuList" :key="item.value" :value="item.value">{{ item.label }}</i-option>
                            </i-select>
                          </div>
                        </i-form>
                      </div>
                    </div>
                  </Submenu>
                  <div style="width:100%;height: 45px;border: none;margin-left: 25px;cursor: pointer;margin-top: 10px">
                    <span @click="createDictClick" class="rightFontSize">数据字典<i style="position: relative;left:100px;font-size: 14px;" class="ivu-icon ivu-icon-md-create"></i></span>
                    <Tooltip :transfer="true" content="数据字典文档" placement="left" class="jimu-tooltip">
                      <a class="jimu-table-tip help-color" href="http://report.jeecg.com/2083759" target="_blank" style="margin-right: 26px;">
                        <Icon size="14" type="ios-help-circle-outline" style="margin-top: 4px;" />
                      </a>
                    </Tooltip>
                  </div>
                </i-menu>
              </template>
            </div>
          </template>
        </card>
      </div>
    </div>

    <div :class="centerDivClass">

      <div class="layout-content">
        <div id="jm-sheet-wrapper">
          <div class="jm-sheet">
            <div class="jm-sheet-toolbar">
              <tools></tools>
            </div>

            <hot-table id="workexelce" :settings="hotSettings" ref="worktable"></hot-table>

          </div>
        </div>

      </div>

    </div>

    <div class="jm-rp-right-container">
      <div id="propsDiv">
        <span slot="title" @click="toggleRight">
          <span style="color: #000000;font-size: 12px;position: relative;top: 4px;float: right;right:200px" v-if="propsContentShow">收起</span>
          <Icon type="md-arrow-dropright" size="24" />
        </span>
        <card style="width: 250px;height: 977px" v-if="propsContentShow" class="rightPadding">
          <Tabs size="small" v-model="rightTabName">

            <!-- 基本设置  -->
            <tab-pane label="基本" name="name1" :class="'little-input'" class="basic">
              <div id="propsContentDiv" class="layout-content jm-setting-container" :style="{height: settingsHeight+'px'}">
                <div class="dataSourceForm">
                  <div class="rightFontSize">
                    <span>坐标</span>
                    <i-input class="twoInputWidth" disabled v-model="excel.coordinate"></i-input>
                  </div>
                  <div class="basicSettingTop">
                    <span class="rightFontSize">类型</span>
                    <i-select class="twoInputWidth" v-model="excel.type" @on-change="onChangeCellDisplay">
                      <i-option value="text" key="text" class="rightFontSize">文本</i-option>
                      <i-option value="dataset" key="dataset" class="rightFontSize">数据集</i-option>
                      <i-option value="img" key="img" class="rightFontSize">图片</i-option>
                      <i-option value="barcode" key="barcode" class="rightFontSize">条形码</i-option>
                      <i-option value="qrcode" key="qrcode" class="rightFontSize">二维码</i-option>
                    </i-select>
                  </div>
                  <div class="basicSettingTop rightFontSize">
                    <span>值</span>
                    <i-input @on-click="enlargeInputClick" icon="md-contract" style="margin-left: 16px;" v-model="excel.excelValue" @keyup.enter.native="submitValue" @on-blur="submitValue" class="twoInputWidth"></i-input>
                  </div>

                  <div class="basicSettingTop rightFontSize">
                    <span>宽度</span>
                    <i-input title="输入完值回车生效!" placeholder="输入完值回车生效!" v-model="excel.width" @keyup.enter.native="handleChangeCellWidth" @on-blur="handleChangeCellWidth" class="twoInputWidth" :disabled="excel.isMergeCell"></i-input>
                  </div>

                  <div class="rightFontSize basicSettingTop">
                    <span>高度</span>
                    <i-input title="输入完值回车生效!" placeholder="输入完值回车生效!" v-model="excel.height" @on-blur="handleChangeCellHeight" @keyup.enter.native="handleChangeCellHeight" class="twoInputWidth" :disabled="excel.isMergeCell"></i-input>
                  </div>

                  <i-menu theme="light" width="100%" :class="menuitemClasses">

                    <Submenu name="blankRowSetting">
                      <template slot="title">
                        <span class="rightFontSize">补充空白行
                          <Tooltip :transfer="true" content="补充空白行文档" placement="left" class="jimu-tooltip">

                          </Tooltip>
                        </span>
                      </template>
                      <div>
                        <div class="rightFontSize" style="padding-left:2px">
                          <Checkbox v-model="excel.completeBlankStatus" @on-change="onChangeCompleteBlankStatus">启用</Checkbox>
                        </div>
                        <div class="rightFontSize" style="margin-top:12px">
                          <span>数据行倍数：</span>
                          <i-input type="number" v-model="excel.completeBlankRow" @on-change="onChangeCompleteBlankRow" style="width:80px" class="rightFontSize"></i-input>
                        </div>
                      </div>
                    </Submenu>

                    <div v-if="excel.hasGroup">

                      <Submenu name="groupSetting">
                        <template slot="title">
                          <span class="rightFontSize">分组设置
                            <Tooltip :transfer="true" content="分组设置文档" placement="left" class="jimu-tooltip">

                            </Tooltip>
                          </span>
                        </template>
                        <div>
                          <div class="rightFontSize">
                            <span>聚合方式</span>
                            <i-select ref="excelPolyWay" :transfer="true" :model.sync="excel.polyWay" v-model="excel.polyWay" @on-change="selectPolyList" class="fourInputWidth" :disabled="wayDisabled">
                              <i-option class="rightFontSize" v-for="item in polyWayList" :key="item.value" :value="item.value">{{ item.label }}</i-option>
                            </i-select>
                          </div>
                          <div class="basicSettingTop rightFontSize">
                            <span>扩展方向</span>
                            <i-select :model.sync="excel.direction" :transfer="true" v-model="excel.direction" @on-change="selectDirectionList" class="fourInputWidth">
                              <i-option class="rightFontSize" v-for="item in directionList" :key="item.value" :value="item.value">{{ item.label }}</i-option>
                            </i-select>
                          </div>
                          <div class="basicSettingTop rightFontSize">
                            <span>排序方式</span>
                            <i-select :transfer="true" :model.sync="excel.sort" v-model="excel.sort" @on-change="selectSortList" class="fourInputWidth">
                              <i-option class="rightFontSize" v-for="item in sortType" :key="item.value" :value="item.value">{{ item.label }}</i-option>
                            </i-select>
                          </div>
                          <div class="basicSettingTop rightFontSize">
                            <span>高级配置</span>
                            <i-select :transfer="true" :model.sync="excel.advanced" v-model="excel.advanced" @on-change="selectAdvancedList" class="fourInputWidth">
                              <i-option class="rightFontSize" v-for="item in advancedList" :key="item.value" :value="item.value">{{ item.label }}</i-option>
                            </i-select>
                          </div>
                        </div>
                      </Submenu>
                      <!--分组小计设置-->
                      <Submenu name="subtotalSetting">
                        <template slot="title">
                          <span class="rightFontSize">小计设置
                            <Tooltip :transfer="true" content="分组小计文档" placement="left" class="jimu-tooltip">
                              <a class="jimu-table-tip help-color help-margin" href="http://report.jeecg.com/2333594" target="_blank">
                                <Icon size="14" type="ios-help-circle-outline" style="margin-top: 2px" />
                              </a>
                            </Tooltip>
                          </span>
                        </template>

                        <div class="rightFontSize" v-if="excel.funcname=='-1'">
                          <span>分组依据</span>
                          <i-select ref="excelSubtotal" :transfer="true" v-model="excel.subtotal" @on-change="selectSubtotal" class="fourInputWidth">
                            <i-option class="rightFontSize" v-for="item in subtotalList" :key="item.value" :value="item.value">{{ item.label }}</i-option>
                          </i-select>
                        </div>

                        <div :class="['rightFontSize',{'basicSettingTop':excel.subtotal=='-1'&&excel.funcname=='-1'}]" v-if="excel.subtotal=='-1'">
                          <span>聚合方式</span>
                          <i-select ref="excelAggregate" :transfer="true" v-model="excel.funcname" @on-change="selectAggregate" class="fourInputWidth">
                            <i-option class="rightFontSize" v-for="item in aggregateList" :key="item.value" :value="item.value">{{ item.label }}</i-option>
                          </i-select>
                        </div>
                      </Submenu>
                    </div>

                    <Submenu name="hyperlinksSetting">
                      <template slot="title">
                        <span class="rightFontSize">超链接设置
                          <Tooltip :transfer="true" content="超链接文档" placement="left" class="jimu-tooltip">
                            <a class="jimu-table-tip help-color help-margin" href="http://report.jeecg.com/2232719" target="_blank">
                              <Icon size="14" type="ios-help-circle-outline" style="margin-top: 2px" />
                            </a>
                          </Tooltip>
                        </span>
                      </template>

                      <span class="rightFontSize">添加链接</span>
                      <Dropdown @on-click="onHyperlinksClick" placement="bottom-start" :transfer="true">
                        <a href="javascript:void(0)">
                          <Icon type="md-add" style="margin-left: 20px" />
                        </a>
                        <Dropdown-menu slot="list">
                          <Dropdown-item name="2" class="rightFontSize">图表联动</Dropdown-item>
                          <Dropdown-item name="0" class="rightFontSize">报表钻取</Dropdown-item>
                          <Dropdown-item name="1" class="rightFontSize">网络报表</Dropdown-item>
                        </Dropdown-menu>
                      </Dropdown>

                      <i-table style="margin-top: 10px" class="rightFontSize" :columns="hyperlinks.columns" :data="hyperlinks.data"></i-table>

                    </Submenu>
                    <Submenu name="otherSetting">
                      <template slot="title">
                        <span class="rightFontSize">其他设置
                          <Tooltip :transfer="true" content="数据格式化文档" placement="left" class="jimu-tooltip">
                            <a class="jimu-table-tip help-color help-margin" href="http://report.jeecg.com/2084138" target="_blank">
                              <Icon size="14" type="ios-help-circle-outline" style="margin-top: 2px" />
                            </a>
                          </Tooltip>
                        </span>
                      </template>
                      <div class="rightFontSize">
                        <span>小数位数</span>
                        <i-input class="rightFontSize fourInputWidth" v-model="excel.decimalPlaces" @on-change="onChangeDecimalPlaces"></i-input>
                      </div>
                      <div class="rightFontSize" style="margin-top: 5px;padding:0 5px">
                        <i-button @click="showEnhanceConfig" icon="md-code-working" size="small" long type="primary" ghost>增强配置</i-button>
                      </div>
                    </Submenu>
                    <!--参数设置-->
                    <Submenu name="primarySubreportSetting">
                      <template slot="title">
                        <span class="rightFontSize">主子报表参数设置
                          <Tooltip :transfer="true" content="主子报表文档" placement="left" class="jimu-tooltip">
                            <a class="jimu-table-tip help-color help-margin" href="http://report.jeecg.com/2296481" target="_blank">
                              <Icon size="14" type="ios-help-circle-outline" style="margin-top: 2px" />
                            </a>
                          </Tooltip>
                        </span>
                      </template>
                      <i-button class="rightFontSize" @click="primarySubreportClick">新增</i-button>
                      <i-table style="margin-top: 10px" class="rightFontSize" :columns="primarySubreport.columns" :data="primarySubreport.data"></i-table>

                    </Submenu>

                    <Submenu name="layerOffset" v-if="layerOffsetEnable">
                      <template slot="title">
                        <span class="rightFontSize">图片偏移量设置</span>
                      </template>
                      <div class="rightFontSize">
                        <span>横向偏移(px)：</span>
                        <i-input type="number" style="margin-left: 10px;width:90px !important;" v-model="layerOffsetX" @on-change="handleChangeLayerOffset" class="twoInputWidth"></i-input>
                      </div>

                      <div class="rightFontSize" style="margin-top:12px">
                        <span>纵向偏移(px)：</span>
                        <i-input type="number" style="margin-left: 10px;width:90px !important;" v-model="layerOffsetY" @on-change="handleChangeLayerOffset" class="twoInputWidth"></i-input>
                      </div>
                    </Submenu>

                  </i-menu>
                </div>
              </div>
            </tab-pane>

            <!-- 图表样式设置  -->
            <tab-pane v-if="chartsflag && !backgroundSettingShow" label="样式" name="name2" :disabled="selectedChartType==='apiUrlType'" class="stylePadding">
              <i-menu theme="light" width="auto" :style="{height: settingsHeight+'px', marginLeft: '-20px'}" :class="menuitemClasses" accordion>

                <!-- 标题设置 -->
                <j-title-setting v-if="titleSettings" @change="onSettingsChange" :settings="titleSettings"></j-title-setting>
                <!-- 柱体设置 -->
                <j-bar-setting v-if="barSettings" @change="onSeriesChange" :settings="barSettings" :is-multi-chart="isMultiChart"></j-bar-setting>
                <!-- 线体设置 -->
                <j-line-setting v-if="lineSettings" @change="onSeriesChange" :settings="lineSettings" :is-multi-chart="isMultiChart"></j-line-setting>
                <!-- 饼图设置-->
                <j-pie-setting v-if="pieSettings" @change="onSeriesChange" :settings="pieSettings"></j-pie-setting>
                <!-- 边距设置-->
                <j-margin-setting v-if="marginSettings" @change="onSeriesChange" :settings="marginSettings"></j-margin-setting>
                <!-- 中心点设置-->
                <j-central-point-setting v-if="centralPointSettings" @change="onSeriesChange" :settings="centralPointSettings"></j-central-point-setting>
                <!-- 漏斗设置-->
                <j-funnel-setting v-if="funnelSettings" @change="onSeriesChange" :settings="funnelSettings"></j-funnel-setting>
                <!-- 象形图设置 -->
                <j-pictorial-setting v-if="pictorialSettings" @change="onPictorialChange" @upload-success="pictorialIconUploadSuccess" :settings="pictorialSettings"></j-pictorial-setting>
                <!-- 地图设置 -->
                <j-map-setting ref="mapModal" v-if="mapGeoSettings" @change="onSettingsChange" :settings="mapGeoSettings"></j-map-setting>
                <!-- 散点设置-->
                <j-scatter-setting v-if="scatterSettings" @change="onSeriesChange" :settings="scatterSettings"></j-scatter-setting>
                <!-- 雷达设置-->
                <j-radar-setting v-if="radarSettings" @change="onSettingsChange" :settings="radarSettings"></j-radar-setting>
                <!-- 仪表盘设置-->
                <j-gauge-setting v-if="gaugeSettings" @change="onSeriesChange" :settings="gaugeSettings"></j-gauge-setting>
                <!-- x轴设置-->
                <j-xaxis-setting v-if="xAxisSettings" @change="onSettingsChange" :settings="xAxisSettings"></j-xaxis-setting>
                <!-- y轴设置(settings支持数组)-->
                <j-yaxis-setting v-if="yAxisSettings" @change="onSettingsChange" :settings="yAxisSettings"></j-yaxis-setting>
                <!-- 数值设置-->
                <j-series-setting v-if="seriesLabelSettings" @change="onSeriesChange" :settings="seriesLabelSettings"></j-series-setting>
                <!-- 提示语设置-->
                <j-tooltip-setting v-if="tooltipSettings" @change="onSettingsChange" :settings="tooltipSettings"></j-tooltip-setting>
                <!-- 坐标轴边距设置-->
                <j-grid-setting v-if="gridSettings" @change="onSettingsChange" :settings="gridSettings"></j-grid-setting>
                <!-- 图例设置-->
                <j-legend-setting v-if="legendSettings" @change="onSettingsChange" :settings="legendSettings"></j-legend-setting>
                <!-- 自定义配色-->
                <j-match-setting style="border-bottom: inset 1px;" v-if="graphSettings ||gaugeSettings ||funnelSettings || pieSettings || isMultiChart || selectedChartType.indexOf('multi')!=-1 || selectedChartType == 'radar.basic'" :chart-options="chartOptions" :data-settings="dataSettings"></j-match-setting>
                <!-- 背景设置-->
                <j-background-setting @change="chartBackgroundChange" @upload-success="chartBackgroundUploadSuccess" @remove="removeChartBackground" :settings="chartBackground"></j-background-setting>
              </i-menu>
            </tab-pane>

            <!-- 图表数据设置  -->
            <tab-pane style="padding:10px 8px;" v-if="chartsflag && selectedChartType !== 'map.simple'" :label="dataLabel" name="name3" :class="'little-input'">
              <div class="datastyle rightFontSize dataSourceForm">
                <span>数据类型</span>
                <i-select class="fourInputWidth" v-model="dataSettings.dataType" :disabled="selectedChartType==='apiUrlType'" @on-change="dataTypeChange">
                  <i-option class="rightFontSize" value="sql">SQL数据集</i-option>
                  <i-option class="rightFontSize" value="api">Api数据集</i-option>
                  <i-option class="rightFontSize" value="json">JSON数据集</i-option>
                  <i-option class="rightFontSize" value="javabean">JavaBean数据集</i-option>
                </i-select>
              </div>

              <!-- api数据集 -->
              <div class="datastyle rightFontSize dataSourceForm" v-if="dataSettings.dataType == 'api'">
                <div class="datastyle">
                  <span style="margin-left: 7px">Api类型</span>
                  <i-select class="fourInputWidth" v-model="dataSettings.apiStatus" :disabled="selectedChartType==='apiUrlType'" @on-change="seriesOnChange">
                    <i-option class="rightFontSize" value="0">静态数据</i-option>
                    <i-option class="rightFontSize" value="1">动态数据</i-option>
                    <i-option class="rightFontSize" value="2">接口请求</i-option>
                  </i-select>
                </div>
                <div class="datastyle" v-if="dataSettings.apiStatus == '0'">
                  <span style="display: inline-block;text-align: left;width: calc(100% - 50px);">请自定义数据值:</span>
                  <i-button style="width: 44px;" size="small" type="primary" @click="addEchartInfoData">编辑</i-button>
                </div>
                <div class="datastyle" v-if="dataSettings.apiStatus == '2'">
                  <p>接口url:&nbsp;&nbsp;</p>
                  <i-input v-model="dataSettings.apiUrl" :autosize="true" type="textarea" placeholder="请输入接口地址..."></i-input>
                </div>
                <div class="datastyle rightFontSize dataSourceForm" v-if="dataSettings.apiStatus == '1'">
                  <div>
                    <span>绑定数据集:</span>
                    <i-select style="width: 136px" v-model="dataSettings.dataId" @on-change="onSelectApiData">
                      <i-option class="rightFontSize" v-for="item in apiDataList" :key="item.dbId" :value="item.dbId">{{ item.title }}</i-option>
                    </i-select>
                  </div>
                </div>
              </div>

              <!-- sql数据集 -->
              <div class="datastyle rightFontSize dataSourceForm" v-if="dataSettings.dataType == 'sql'">
                <div class="datastyle">
                  <span>绑定数据集:</span>
                  <i-select style="width: 136px" v-model="dataSettings.dataId" @on-change="onSelectSqlData">
                    <i-option class="rightFontSize" v-for="item in sqlDataList" :key="item.dbId" :value="item.dbId">{{ item.title }}</i-option>
                  </i-select>
                </div>
                <div class="datastyle">
                  <span>分类属性:</span>
                  <i-select class="fourInputWidth" v-model="dataSettings.axisX" @on-change="onAxisXConfigChange">
                    <i-option class="rightFontSize" v-for="item in sqlDataFieldList" :key="item.title" :value="item.title">{{ item.fieldText }}</i-option>
                  </i-select>
                </div>
                <div class="datastyle">
                  <span style="margin-left: 12px">值属性:</span>
                  <i-select class="fourInputWidth" :model.sync="dataSettings.axisY" v-model="dataSettings.axisY" @on-change="onAxisYConfigChange">
                    <i-option class="rightFontSize" v-for="item in sqlDataFieldList" :key="item.title" :value="item.title">{{ item.fieldText }}</i-option>
                  </i-select>
                </div>
                <template v-if="isMultiChart || selectedChartType.indexOf('radar') !==-1 || selectedChartType == 'graph.simple'">
                  <div class="datastyle">
                    <span>系列属性:</span>
                    <i-select class="fourInputWidth" v-model="dataSettings.series">
                      <i-option v-for="item in sqlDataFieldList" :key="item.title" :value="item.title">{{ item.title }}</i-option>
                    </i-select>
                  </div>
                </template>
                <!--分割线-->
                <template v-if="selectedChartType == 'graph.simple'">
                  <Divider style="margin: 20px 0 20px 0"></Divider>
                  <div class="datastyle">
                    <span>绑定节点关系数据集:</span>
                    <i-select style="width: 48%" v-model="dataSettings.dataId1" @on-change="onSelectSqlData2">
                      <i-option v-for="item in sqlDataList" :key="item.dbId" :value="item.dbId">{{ item.title }}</i-option>
                    </i-select>
                  </div>
                  <div class="datastyle">
                    <span>来源属性:</span>
                    <i-select class="fourInputWidth" v-model="dataSettings.source">
                      <i-option v-for="item in sqlDataFieldList2" :key="item.title" :value="item.title">{{ item.title }}</i-option>
                    </i-select>
                  </div>
                  <div class="datastyle">
                    <span>目标属性:</span>
                    <i-select class="fourInputWidth" :model.sync="dataSettings.target" v-model="dataSettings.target">
                      <i-option v-for="item in sqlDataFieldList2" :key="item.title" :value="item.title">{{ item.title }}</i-option>
                    </i-select>
                  </div>
                </template>
              </div>

              <!-- json数据集 -->
              <div class="datastyle rightFontSize dataSourceForm" v-if="dataSettings.dataType == 'json'">
                <div>
                  <span>绑定数据集:</span>
                  <i-select style="width: 136px" v-model="dataSettings.dataId" @on-change="onSelectJsonData">
                    <i-option class="rightFontSize" v-for="item in jsonDataList" :key="item.dbId" :value="item.dbId">{{ item.title }}</i-option>
                  </i-select>
                </div>
              </div>

              <!-- javaBean数据集 -->
              <div class="datastyle rightFontSize dataSourceForm" v-if="dataSettings.dataType == 'javabean'">
                <div>
                  <span>绑定数据集:</span>
                  <i-select style="width: 136px" v-model="dataSettings.dataId" @on-change="onSelectJavaBeanData">
                    <i-option class="rightFontSize" v-for="item in javaBeanDataList" :key="item.dbId" :value="item.dbId">{{ item.title }}</i-option>
                  </i-select>
                </div>
              </div>
              <!-- 多维度处理  -->
              <div class="datastyle" v-if="(dataSettings.dataType == 'sql' || dataSettings.apiStatus == '1' || dataSettings.apiStatus == '0') && (selectedChartType == 'mixed.linebar'||selectedChartType == 'bar.stack')|| selectedChartId=='bar.negative'">
                <p>系列类型:</p>
                <div style="margin-top: 5px;">
                  <Row class="ivurow" style="margin-top: 5px;">
                    <i-button type="primary" size="small" @click="seriesModal=true">新增</i-button>
                  </Row>
                  <i-table stripe :columns="seriesColumns" :data="seriesTypeData"></i-table>
                </div>
              </div>
              <!-- 刷新配置 -->
              <template class="rightFontSize" v-if="dataSettings.apiStatus==='1' || dataSettings.dataType == 'sql'">
                <div class="datastyle">
                  <span style="display: inline-block;text-align: left;width: calc(100% - 50px);" class="rightFontSize">定时刷新:</span>
                  <i-switch size="small" v-model="dataSettings.isTiming" @on-change="timerChange" />
                </div>
                <div class="datastyle" style="display: flex;align-items: center;" v-if="dataSettings.isTiming">
                  <span style="display: inline-block;text-align: left;width: calc(100% - 100px);">刷新间隔:</span>
                  <i-input size="small" type="number" v-model="dataSettings.intervalTime" style="width:100px" @on-blur="timerChange"><span slot="append">秒</span></i-input>
                </div>
              </template>
              <i-button @click="runChart" type="primary" style="width: 100%;height: 36px;margin-top: 10%;">运行</i-button>
            </tab-pane>

            <!-- 背景图设置  -->
            <tab-pane v-if="backgroundSettingShow" style="visibility: visible" label="背景图设置" name="name4" :class="'little-input'" class="rightFontSize dataSourceForm">
              <div :class="backgroundSettings.path?'excel-backgroud-st':''" style="height: 500px;overflow-y: auto;padding:14px 7px;">
                <span style="display:inline-block;margin: 5px 0">图片：</span>
                <Upload ref="upload" :headers="uploadHeaders" :show-upload-list="false" :default-file-list="backgroundImg" :on-success="backgroundImgUploadSuccess" :on-exceeded-size="(e)=>handleMaxSize(e,10)" :format="['jpg','jpeg','png']" :max-size="10240" :action=" actionUrlPre + '/jmreport/upload' " style="display: inline-block;width:58px;">
                  <div style="display: block" class="pictorial-icon-upload" v-if="backgroundSettings.path">
                    <img style="width: 196px;max-height: 100px" :src="getBackgroundImg()" />
                    <div class="cover" style="width: 196px">
                      <Icon type="ios-create-outline" />
                    </div>
                  </div>
                  <i-button v-else style="margin-left:25px" type="primary" size="small">上传</i-button>
                </Upload>

                <div style="width:100%">
                  <div class="basicSettingTop">
                    <span style="padding: 6px 0">图片宽度:</span>
                    <i-input class="fourInputWidth" v-model="backgroundSettings.width" @on-blur="backgroundChange"></i-input>
                  </div>
                  <div class="basicSettingTop">
                    <span style="padding: 6px 0">图片高度:</span>
                    <i-input class="fourInputWidth" v-model="backgroundSettings.height" @on-blur="backgroundChange"></i-input>
                  </div>
                </div>

                <div style="width:100%;" class="basicSettingTop">
                  <span style="padding: 6px 0">重复设置:</span>
                  <i-select class="fourInputWidth" v-model="backgroundSettings.repeat" style="width:99%" @on-change="backgroundChange">
                    <i-option class="rightFontSize" value="no-repeat">无重复</i-option>
                    <i-option class="rightFontSize" value="repeat-x">水平重复</i-option>
                    <i-option class="rightFontSize" value="repeat-y">垂直重复</i-option>
                    <i-option class="rightFontSize" value="repeat">双向重复</i-option>
                  </i-select>
                </div>

                <i-button v-if="backgroundSettings.path" style="width: 99%;margin:10px 0" type="primary" @click="removeBackground">取消背景图</i-button>

                <div style="width:100%;" class="basicSettingTop">
                  <span style="padding: 6px 0">表格边框:</span>
                  <i-select class="fourInputWidth" v-model="gridLine" style="width:99%" @on-change="gridLineChange">
                    <i-option class="rightFontSize" value="true">显示</i-option>
                    <i-option class="rightFontSize" value="false">隐藏</i-option>
                  </i-select>
                </div>

              </div>
            </tab-pane>

            <!-- 条形码设置  -->
            <tab-pane v-if="barcodeSettings" style="visibility: visible" :label="qrCodeLabel" name="name5" :class="'little-input'">
              <j-barcode-setting @change="onBarcodeChange" :settings="barcodeSettings"></j-barcode-setting>
            </tab-pane>

            <!-- 二维码设置  -->
            <tab-pane v-if="qrcodeSettings" style="visibility: visible" :label="codeLabel" name="name6" :class="'little-input'">
              <j-qrcode-setting @change="onBarcodeChange" :settings="qrcodeSettings"></j-qrcode-setting>
            </tab-pane>
          </Tabs>

        </card>
      </div>
    </div>
  </div>

</template>

<script>
import { HotTable } from "@handsontable/vue";
import HyperlinksSetting from "@/components/hyperlinks";
import dataSourceSetting from "@/components/dataSourceSetting";
import tools from "@/components/tools";
import reportDesignApi from "@/api/reportDesignApi";
import ExelceContext from "@/lib/ExelceContext"
import FiledtreeDrag from "@/lib/FiledtreeDrag"
import "../../node_modules/handsontable/dist/handsontable.full.css";
export default {
  components: { HotTable, HyperlinksSetting, dataSourceSetting,tools },
  name: "Designer",
  data() {
    let _this = this;
    return {
      // 图层偏移量 left
      layerOffsetX: 0,
      // 图层偏移量 top
      layerOffsetY: 0,
      // 图层偏移量 自定义状态
      layerOffsetEnable: false,

      uploadHeaders: {},
      //后台配置的打印等信息
      configString: null,
      windowHeight: "",
      settingsHeight: "",
      actionUrlPre: "",
      createLoading: false,
      dataSet: {}, //数据集code和名称
      dataXs: "",
      /* menuitem : "printinfo",*/
      chartOptions: {},
      menuitem: "printinfo",
      menuList: [
        { value: "printinfo", label: "打印设计" },
        { value: "datainfo", label: "数据报表" },
        { value: "chartinfo", label: "图形报表" },
      ],
      polyWayList: [
        { value: "select", label: "列表" },
        { value: "group", label: "分组" },
      ],
      subtotalList: [
        { value: "-1", label: "否" },
        { value: "groupField", label: "是" },
      ],
      aggregateList: [
        { value: "-1", label: "无" },
        { value: "SUM", label: "求和" },
        { value: "MAX", label: "最大值" },
        { value: "MIN", label: "最小值" },
        { value: "AVERAGE", label: "平均值" },
        { value: "COUNT", label: "计数" },
      ],
      sortType: [
        { value: "default", label: "默认" },
        { value: "asc", label: "正序" },
        { value: "desc", label: "倒序" },
      ],
      directionList: [
        { value: "down", label: "纵向" },
        { value: "right", label: "横向" },
      ],
      advancedList: [
        { value: "default", label: "普通属性" },
        { value: "dynamic", label: "动态属性" },
      ],
      /*dataSourceTypeList:[{value: 'MYSQL5.5',label: 'MySQL5.5'},{value: 'MYSQL5.7',label: 'MySQL5.7'},{value: 'ORACLE',label: 'Oracle'},{value: 'SQLSERVER',label: 'SQLServer'}],
       */ designerObj: {
        id: "",
        name: "",
        type: "printinfo",
      },
      designerObjRules: {
        name: [
          { required: true, message: "请填写报表名称", trigger: "change" },
        ],
        type: [
          { required: true, message: "请选择报表类型", trigger: "change" },
        ],
      },
      visible: false,
      token: "",
      apiModal: false,
      deleteParamModel: false,
      deleteFieldModel: false,
      dataShow: true, //数据显示/隐藏
      propsContentShow: true, //属性显示/隐藏
      tabStyleShow: false, //右侧样式设置显示隐藏
      tabDataShow: false, //右侧数据显示隐藏
      tabValue: "1", //
      treeSpanNum: 3,
      tableSpanNum: 21,
      propsSpanNum: 3,
      excel: {
        excelValue: "",
        type: "text",
        coordinate: "", //坐标
        x: 0,
        y: 0,
        sort: "",
        polyWay: "",
        advanced: "default",
        subtotal: "",
        aggregate: "",
        direction: "",
        isDict: 0,
        dictCode: "",
        hasGroup: false,
        decimalPlaces: "", //小数位数
        //补充空白行状态
        completeBlankStatus: false,
        //补充空白行行数
        completeBlankRow: "",
        isMergeCell: false,
        width: "",
        height: "",
      },
      offsetInfo: "0,0",
      loading: true,
      tableHeight: 0,
      paramTableHeight: 0,

      treeData: null,

      visibleData: false,

      //自定义颜色名称
      customColorNameList: [],
      //数值显示位置集合
      labelPositionArray: [],
      //数值设置 series中的label配置信息
      seriesLabelSettings: {},
      //象形柱图设置
      pictorialSettings: {},
      //漏斗设置
      funnelSettings: {},
      //边距设置
      marginSettings: {},
      //中心点设置
      centralPointSettings: {},
      //饼块设置 饼状图专有
      pieSettings: {},
      //线条设置 折线图专有
      lineSettings: {},
      //柱体设置 柱状图专有
      barSettings: {},
      //散点设置 散点图专有
      scatterSettings: {},
      //仪表图设置 仪表图专有
      gaugeSettings: {},
      //关系图设置 关系图专有
      graphSettings: {},
      //地图设置 地图专有
      mapGeoSettings: {},
      //雷达图设置 雷达图专有
      radarSettings: [],
      //图表grid配置 s
      gridSettings: {},
      //图表坐标轴配置 s
      xAxisSettings: {},
      yAxisSettings: "",
      doubleyAxisSettings: [],
      //图表标题配置 c
      titleSettings: {},
      //图表标题配置 c
      legendSettings: {},
      //图表提示语配置 c
      tooltipSettings: {},
      //数据集配置
      dataSettings: {
        dataType: "api",
        apiStatus: "",
        apiUrl: "",
        dataId: "",
        axisX: "",
        axisY: "",
        series: "",
        yText: "",
        xText: "",
        dbCode: [],
        dataId1: "",
        source: "",
        target: "",
        isTiming: false,
        intervalTime: "5",
        linkIds: "",
      },
      //api静态数据
      apiStaticDataList: "",
      //sql数据集
      sqlDataList: [],
      //sql数据集字段
      sqlDataFieldList: [],
      //sql数据集字段2
      sqlDataFieldList2: [],
      //api数据集
      apiDataList: [],
      //json数据集
      jsonDataList: [],
      //javaBean数据集
      javaBeanDataList: [],
      // 展开节点的id
      activedTreeNode: "",
      //背景图设置
      backgroundImg: [{ name: "backgroundImg", url: "" }],
      backgroundSettingShow: false,
      backgroundSettings: {
        path: "",
        repeat: "no-repeat",
        width: "",
        height: "",
      },
      // 表格线
      gridLine: "true",
      //图表背景图设置
      chartBackgroundImg: [{ name: "chartBackgroundImg", url: "" }],
      chartBackground: {
        color: "#fff",
        enabled: false,
        image: "",
        repeat: "no-repeat",
      },
      //条形码设置
      barcodeSettings: false,
      //二维码设置
      qrcodeSettings: false,
      //打印设置
      printSettings: {},
      printSettingShow: false,
      // 预览页工具条设置
      viewSettingShow: false,
      viewSettings: {},
      echartInfo: {
        id: "",
        //标题
        titleShow: true,
        titleText: "",
        titleFontSize: 20,
        titleFontWeight: "bolder",
        titleColor: "#c43632",
        titleLocation: "left",
        //柱体
        barWidth: 0,
        barRadius: 0,
        barMinHeight: 0,
        //折线
        step: false, //阶梯线图
        showSymbol: true, //标记点
        smooth: false, //平滑曲线
        symbolSize: 8, // 设置折线上圆点大小
        linewidth: 5, // 设置线宽
        //饼图
        pieLabelPosition: "outside", //标签位置
        minAngle: 0, //最小角度
        notCount: false, //不展示零
        autoSort: false, //自动排序
        roseType: false, //南丁格尔玫瑰
        isRadius: false, //是否环形
        pieRadius: "40%,50%", //半径大小
        //地图
        scale: 0,
        numerTextHighCol: "",
        borderWidth: 0,
        areaCol: "",
        areaHighCol: "",
        borderCol: "",
        //X轴样式
        xaxisShow: true,
        xaxisText: "",
        xaxisLine: true,
        xaxisLinecol: "#c43632",
        xaxisTextsize: 0,
        axisLabelRotate: 0,
        //Y轴样式
        yaxisShow: true,
        yaxisText: "",
        yaxisLine: true,
        yaxisLinecol: "#c43632",
        yaxisTextsize: 0,
        //数值设置
        numerShow: true,
        numerTextSize: 0,
        numerTextcol: "#c43632",
        numerTextweig: "",
        //提示框
        tooltipShow: true,
        tooltipTextSize: 0,
        tooltipTextcol: "#c43632",
        //图例
        legendShow: true,
        //legendItemWidth: 0,
        legendTop: "top",
        legendLeft: "left",
        legendOrient: "horizontal",
        legendTextcol: "#c43632",
        legendTextsize: 0,
        //图例数据
        legendData: [],
        //轴边距
        gridLeft: 0,
        gridTop: 0,
        gridRight: 0,
        gridBottom: 0,
        //xy轴字体颜色/轴线颜色
        axisLabelTextCol: "#c43632",
        axisLineLineCol: "#c43632",
        seriesItemNorCol: "#c43632",
        seriesLinemNorCol: "#c43632",
      },
      dataAllocation: {
        dataType: "sqlechData",
        status: "staticData",
        optionData: "{}",
        selectOptionData: {},
        apiListOpt: [],
        sqlListOpt: [],
        sqlListField: [],
        sqlxAxis: "",
        sqlseries: "",
        sqlgroup: "", //系列属性
        sqltype: "", //系列类型
        selectId: "",
        seriesTypeData: [], //系列类型数据
      },
      addEchart: false,
      chartModule: false,
      chartsType: "",
      selectedChartId: "", //图表选择Id
      selectedChartType: "", //图表选择类型
      //自定义颜色样式
      colorMatchData: [],
      colorMatchModal: false,
      colorMatch: {
        name: "",
        color: "",
        edgeColor: "",
        opacity: 1,
        lineColor: "",
      },
      //renderChartBackgroudTip:
      chartsflag: false,
      isMultiChart: false, //是否多组
      rightTabName: "name1",
      chartsTypeArr: [],
      seriesTypeData: [], //系列类型数据
      specialChartType: "",
      seriesModal: false,
      tabDisabled: false,
      seriesObj: {},
      seriesColumns: [
        {
          title: "系列类型",
          key: "name",
          align: "left",
          width: 110,
          render: (h, params) => {
            return this.renderColorButton(h, params, "name", 2);
          },
        },
        {
          title: "操作",
          key: "action",
          align: "right",
          width: 80,
          render: (h, params) => {
            return this.renderColorButton(h, params, "action", 2);
          },
        },
      ],
      customExpressionShow: false, //添加表达式
      expression: "", //表达式
      commonFunction: false, //常用函数
      functionType: [
        { id: 0, name: "单元格函数" },
        { id: 1, name: "统计函数" },
        { id: 2, name: "日期函数" },
        { id: 3, name: "数学函数" },
        { id: 4, name: "字符串函数" },
        { id: 5, name: "颜色函数" },
        { id: 6, name: "条件函数" },
        { id: 7, name: "系统函数" },
        { id: 8, name: "判断函数" },
      ], //函数类别
      functionList: [
        { name: "SUM,AVERAGE,MIN,MAX,row" },
        { name: "DBSUM,DBAVERAGE,DBMIN,DBMAX" },
        { name: "date,day,month,time,year,now,nowstr" },
        { name: "abs,ceil,floor,round,trunc,rand" },
        { name: "char,cnmoney,concat,lower,upper,date_str" },
        { name: "color,rowcolor" },
        { name: "case,if" },
        {
          name:
            "assert,sysdate,cmp,print,pst,long,double,boolean,str,bigint,decimal,identity,type,is_a,is_def,undef,range,tuple,eval,comparator,constantly," +
            "math.abs,math.round,math.floor,math.ceil,math.sqrt,math.pow,math.log,math.log10,math.sin,math.cos,math.tan,math.atan,math.acos,math.asin," +
            "date_to_string,string_to_date,string.contains,string.length,string.startsWith,string.endsWith,string.substring,string.indexOf,string.split,string.join,string.replace_first,string.replace_all," +
            "repeat,repeatedly,seq.array,seq.array_of,seq.list,seq.set,seq.map,seq.entry,seq.keys,seq.vals,into,seq.contains_key,seq.add,seq.put,seq.remove,seq.get,map,filter,is_empty,distinct," +
            "is_distinct,include,sort,reverse,reduce,take_while,drop_while,group_by,zipmap,seq.every,seq.not_any,seq.some,seq.eq,seq.neq,seq.gt,seq.ge,seq.lt,seq.le,seq.nil,seq.exists,seq.and,seq.or,seq.min,seq.max",
        },
        { name: "isdate,istime,isnumber,intval,strval" },
      ], //函数集合
      newFunctionList: [],
      interpretation: "",
      leftFunctionIndex: 0, //父级选中样式坐标
      rightFunctionIndex: 0, //子级选中样式坐标
      functionText: "", //最终的函数坐标，如（A1）
      dictShow: true, //字典列表是否显示,
      tabPaneDisabled: false, //基本选项卡是否可以点击
      // 保存报表按钮加载状态
      saveReportLoading: false,
      hyperlinks: {
        data: [],
        columns: [
          {
            title: "连接名称",
            key: "linkName",
            align: "center",
            width: 110,
          },
          {
            title: "操作",
            key: "action",
            align: "center",
            width: 80,
            render: (h, params) => {
              return this.renderLinkButton(h, params, "action", 2);
            },
          },
        ],
      },
      primarySubreport: {
        data: [],
        columns: [
          {
            title: "参数名称",
            key: "linkName",
            align: "center",
            width: 110,
          },
          {
            title: "操作",
            key: "action",
            align: "center",
            width: 80,
            render: (h, params) => {
              return this.renderLinkButton(h, params, "action", 1);
            },
          },
        ],
      },
      linkIds: "",
      linkExcel: "",
      wayDisabled: false, //分组设置聚合方式是否可以点击
      enlargeInputModal: false, //值input放大弹窗
      valueExpression: "", //值表达式
      valueCoordinate: "", //值坐标
      dataLabel: (h) => {
        return this.reanderTooltip(
          h,
          "数据",
          "http://report.jeecg.com/1605007"
        );
      }, //数据选项卡名称自定义
      codeLabel: (h) => {
        return this.reanderTooltip(
          h,
          "二维码设置",
          "http://report.jeecg.com/2290861"
        );
      }, //二维码选项卡定义
      qrCodeLabel: (h) => {
        return this.reanderTooltip(
          h,
          "条形码设置",
          "http://report.jeecg.com/2290862"
        );
      }, //条形码选项卡定义
      functionScreen: false, //表达式弹窗放大缩小操作
      funDraggable: true, //表达式弹窗是否可以拖动
      // 增强
      enhanceModalVisible: false,
      enhanceCssStr: "",
      enhanceJsStr: "",
      hotSettings: {
        startCols: 30,
        startRows: 100,
        colWidths: 100,
        rowHeights: 25,

        fillHandle: {
          autoInsertRow: false,
        },
        wordWrap: false,
        colHeaders: true,
        rowHeaders: true,
        autoColumnSize: false,
        autoRowSize: false,
        manualColumnResize: true,
        manualRowResize: true,
        maxColsNumber: 700,
        outsideClickDeselects: false,
      },
    };
  },

  computed: {
    menuitemClasses: function () {
      return [
        "menu-item",
        this.isCollapsed ? "collapsed-menu" : "",
        "jm-setting-container",
      ];
    },
    colorLabel: function () {
      return this.selectedChartType.indexOf("scatter.bubble") !== -1
        ? "中心颜色"
        : "颜色";
    },
    centerDivClass: function () {
      let str = "jm-rp-designer";
      if (!this.dataShow && !this.propsContentShow) {
        str += " all";
      } else if (!this.dataShow) {
        str += " left";
      } else if (!this.propsContentShow) {
        str += " right";
      }
      return str;
    },

  },
  created() {
    this.offsetInfo = "0,0";
    this.activedTreeNode = "";
    this.windowHeight = window.innerHeight - 50;
    this.settingsHeight = window.innerHeight - 100;

  },
  mounted() {
    this.initFieldTree();
    window.exelceContext = new ExelceContext(this.$refs.worktable, this);
  },
  methods: {
    toggleLeft() {
      let $i = $($("#treeDiv").find("i")[0]);
      let $span = $($("#treeDiv").find("span")[0]);
      let l1 = 12.5,
        l2 = 12.5;
      let $dataDiv = $("#dataDiv");
      if ($i.hasClass("ivu-icon-md-arrow-dropleft")) {
        //收缩
        this.dataShow = false;
        //this.treeSpanNum = 1;
        l1 = 1.5; //收缩后的百分比
        $i.removeClass("ivu-icon-md-arrow-dropleft");
        $i.addClass("ivu-icon-md-arrow-dropright");
        $span.removeClass("icnoAlignment");
        $span.removeClass("icnoRight");
        $span.addClass("icnoLeft");
        $dataDiv.slideUp();
      } else {
        this.dataShow = true;
        //this.treeSpanNum = 3;
        l1 = 12.5; //展开后的百分比
        $i.addClass("ivu-icon-md-arrow-dropleft");
        $i.removeClass("ivu-icon-md-arrow-dropright");
        $span.removeClass("icnoLeft");
        $span.addClass("icnoRight");
        $dataDiv.slideDown();
      }
      if (this.propsContentShow) {
        //判断右边是否展开
        l2 = 12.5;
      } else {
        l2 = 1.5;
      }
      let treeDiv = document.getElementById("treeDiv").parentNode; //获取父节点
      treeDiv.style.cssText = "display: block;width: " + l1 + "%;"; //给父节点设置属性
    },
    toggleRight() {
      let $i = $($("#propsDiv").find("i")[0]);
      let l1 = 12.5,
        l2 = 12.5;
      let $propsContentDiv = $("#propsContentDiv");
      if ($i.hasClass("ivu-icon-md-arrow-dropleft")) {
        this.propsContentShow = true;
        //this.propsSpanNum = 3;
        l2 = 12.5;
        $i.removeClass("ivu-icon-md-arrow-dropleft");
        $i.addClass("ivu-icon-md-arrow-dropright");
        $propsContentDiv.slideDown();
      } else {
        //收缩
        this.propsContentShow = false;
        //this.propsSpanNum = 1;
        l2 = 1.5;
        $i.addClass("ivu-icon-md-arrow-dropleft");
        $i.removeClass("ivu-icon-md-arrow-dropright");
        $propsContentDiv.slideUp();
      }
      if (this.dataShow) {
        l1 = 12.5;
      } else {
        l1 = 1.5;
      }
    },
    changeName: function () { },

    selectmenuList(val) { },
    changeTree(value) { },
    onTreeToggleExpand(node) { },
    excelQueryName(callback, error) { },

    createDictClick() { },

    //单元格展示方式改变
    onChangeCellDisplay(value) {
      //xs.cellProp(this.excel.ri, this.excel.ci, { display: value });
    },
    // 右侧配置单元格值输入框 回车事件
    submitValue(e) { },
    //添加超链接的点击事件
    onHyperlinksClick(name) { },
    saveDbBack(id) { },
    cancelback(obj) { },
    // 图表联动配置完成 回调事件 单元格上的图表联动
    cellLinkageConfigSuccess(linkId) { },
    lingCallBack(linkId) { },
    // 图表联动配置完成 回调事件
    chartLinkageConfigSuccess(linkId) { },
    onChangeDecimalPlaces(e) { },
    onMenuSelect: function (name) {
      if (name == "javabean") {
        this.$refs.javabean.javabeanShow();
      } else {
        this.$refs.dataSource.onMenuSelect(name);
      }
    },
    initFieldTree() {
      if (report_config_id != null && report_config_id != "") {

        reportDesignApi.getReport(report_config_id)
          .then((result) => {

            const dataSet = {};
            let treeResult = [];
            this.apiDataList = [];
            this.sqlDataList = [];
            this.jsonDataList = [];
            this.javaBeanDataList = [];
            result.dataSets.forEach(item => {
              const treeNode = {};
              treeNode.expand = true;
              treeNode.dbCode = item.dbCode
              treeNode.title = item.dbChName
              treeNode.dbId = item.id
              treeNode.type = item.dbType;
              treeNode.isList = item.isList;
              treeNode.children = [];
              item.fields.forEach(field => {
                treeNode.children.push({
                  expand: true,
                  title: field.fieldText,
                  fieldText: field.fieldName
                })
              })
              treeResult.push([treeNode])
              if (item.dbType === "0") {
                this.sqlDataList.push(item);
              }
              if (item.dbType === "1") {
                this.apiDataList.push(item);
              }
              if (item.dbType === "3") {
                this.jsonDataList.push(item);
              }
              if (item.dbType === "2") {
                this.javaBeanDataList.push(item);
              }


            })

            if (treeResult && treeResult.length > 0) {
              for (let node of treeResult) {
                if (this.activedTreeNode == node.id) {
                  node.expand = true
                } else {
                  node.expand = false
                }
              }
              treeResult.forEach(item => {
                dataSet[item[0].code] = item[0].title;
                item[0].render = (h, { root, node, data }) => {
                  FiledtreeDrag.addDrag();
                  return h('div', {
                    style: {
                      display: 'flex',
                      width: '100%',
                      alignItems: 'end',
                      padding: '0 0 0 4px',
                      background: data.expand === true ? '#d5e8fc' : 'none'
                    }
                  },
                    [
                      h('div', [
                        h('div', { style: { display: 'inline-block', width: '90px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, data.title)
                      ]),
                      h('div', [
                        h('i-button', {
                          props: Object.assign({}, {
                            size: 'small',
                            type: "text"
                          }, {
                            icon: 'md-create',
                          }),
                          on: {
                            "click": () => {
                              if (data.type == '2') {
                                //走javabean
                                this.$refs.javabean.editById(data.dbId)
                              } else {
                                this.$refs.dataSource.editById(data.dbId)
                              }
                            }
                          }
                        }),
                        h('i-button', {
                          props: Object.assign({}, {
                            size: 'small',
                            type: "text"
                          }, {
                            icon: 'md-close',
                          }),
                          on: {
                            "click": () => {
                              this.$Modal.confirm({
                                title: '提示',
                                render: (h) => {
                                  return h('div', { style: { margin: '0 -15px' } },
                                    [
                                      h('div', { class: 'modal-body-del' }, '是否确认删除?'),
                                    ])
                                },
                                /*content: '<i class="ivu-icon ivu-icon-ios-alert" style="color: #f90;font-size: 20px;margin-right: 5px;"></i>是否确认删除?',*/
                                onOk: () => {
                                  $http.get({
                                    url: api.delDbData(data.dbId), success: (result) => {
                                      console.log('result=====', result);
                                      this.$Notice.success({
                                        title: '删除成功'
                                      });
                                      this.initFieldTree();
                                    }
                                  });
                                }
                              });
                            }
                          }
                        })
                      ])
                    ]
                  )

                }
                //设置属性 
                let bindAttr = { 'class': { 'dataset-field': true } }
                bindAttr['attrs'] = { 'dbCode': item[0].dbCode }
                if (item[0].isList == '1') {
                  bindAttr['attrs'] = Object.assign({}, bindAttr['attrs'], { isList: 1 })
                }
                //渲染子数据
                item[0].children.forEach(item => {
                  item.render = (h, { root, node, data }) => {
                    return h('span', bindAttr, data.title)
                  }
                });
              });
            }
            console.info(treeResult);
            this.treeData = treeResult;
            this.dataSet = dataSet;
          })
      }
    },

    //表达式弹窗放大缩小操作
    functionScreenClick() { },
    // 单元格宽度改变事件
    handleChangeCellWidth() {
      console.info(this.excel)
      let setColWidthIntance = window.exelceContext.hot.getPlugin('manualColumnResize');
      setColWidthIntance.setManualSize(this.excel.x, this.excel.width);
      window.exelceContext.hot.render();
    },
    handleChangeCellHeight() {
      let setRowHeightInstance = window.exelceContext.hot.getPlugin('manualRowResize');
      setRowHeightInstance.setManualSize(this.excel.y, this.excel.height);
      window.exelceContext.hot.render();
    },

    enlargeInputClick() { },
    enlargeInputOk() { },
    enlargeInputCancel() { },
    setEnhanceConfig(cssStr, jsStr) { },
    showEnhanceConfig() {
      //增强配置弹框
    },
    cancleEnhanceModal() {
      //增强配置弹框关闭
    },
    // 补充空白行 状态改变事件
    onChangeCompleteBlankStatus(value) { },
    // 补充空白行 空白行数变化事件
    onChangeCompleteBlankRow() { },
    primarySubreportClick() { },
  },
};
</script>
